{% extends 'base.html' %}
{% block  css %}
<link rel="stylesheet" type="text/css" href="/static/css/timedropper.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/dialogue.css">
{% endblock %}

{% block content %}
<!-- 对话列表 -->
<ul class="am-comments-list am-comments-list-flip">
  <li class="am-comment am-animation-fade" >
    <a href="#link-to-user-home">
      <img src="/static/images/person-1.jpg" alt="" class="am-comment-avatar" width="48" height="48">
    </a>
    <div class="am-comment-main ">
      <div class="am-comment-bd">
        <p>
         您的最终目的地
        </p>
      </div>
    </div>
  </li>
  <!-- 目的地 -->
  <li class="am-comment-flip am-comment user-step-1" hidden="hidden">
    <a href="#link-to-user-home">
      <img src="/static/images/person-2.jpeg" alt="" class="am-comment-avatar" width="48" height="48">
    </a>
    <div class="am-comment-main">
      <div class="am-comment-bd ">
        <p>
         
        </p>
      </div>
    </div>
  </li>
  <!-- 提示时间 -->
  <li class="am-comment sy-step-2" hidden="hidden" >
    <a href="#link-to-user-home">
      <img src="/static/images/person-1.jpg" alt="" class="am-comment-avatar" width="48" height="48">
    </a>
    <div class="am-comment-main">
      <div class="am-comment-bd ">
        <p>
         选择到达最终目的地时间
        </p>
      </div>
    </div>
  </li>
   <!-- 用户时间 -->
  <li class="am-comment am-comment-flip user-step-2" hidden="hidden">
    <a href="#link-to-user-home">
      <img src="/static/images/person-2.jpeg" alt="" class="am-comment-avatar" width="48" height="48">
    </a>
    <div class="am-comment-main">
      <div class="am-comment-bd ">
        <p>
        <input type="text" id="time">
        <button type="button" class="am-btn am-btn-default am-round conditions-input">确认</button>
        </p>
      </div>
    </div>
  </li>
   <!-- 用户喜好选择 -->
  <li class="am-comment  sy-step-3" hidden="hidden">
    <a href="#link-to-user-home">
      <img src="/static/images/person-1.jpg" alt="" class="am-comment-avatar" width="48" height="48">
    </a>
    <div class="am-comment-main">
      <div class="am-comment-bd ">
        <ul class="type-list">
          <li>
            <a class="am-badge am-badge-primary am-round like-1">美食</a>
          </li>
          <li>
            <a class="am-badge am-badge-primary am-round like-2">宗教</a>
          </li>
          <li>
            <a class="am-badge am-badge-primary am-round like-3">山水</a>
          </li>
        </ul>
        <ul class="type-list">
          <li>
            <a class="am-badge am-badge-primary am-round like-4">娱乐</a>
          </li>
          <li>
            <a class="am-badge am-badge-primary am-round like-5">文化</a>
          </li>
          <li>
            <a class="am-badge am-badge-primary am-round like-6">民族</a>
          </li>
        </ul>
        <div class="like-sure">
          <button class="am-btn am-btn-default am-round button-sure">确认</button>
          <button type="button" class="am-btn am-btn-default am-btn-xs am-round button-change">换一批</button>
        </div>
      </div>
    </div>
  </li>
</ul>



<!-- 行程输入框 s -->
<footer class="am-input-group am-input-group-danger input-bottom">
  <input type="text" class="am-form-field input-text" name="" placeholder="目的地">
  <span class="am-input-group-label conditions-input">
    <i class="am-icon-location-arrow am-icon-fw"></i>
  </span> 
</footer>
<!-- 行程输入框 e -->
{% endblock %}

{% block js %}
<script src="/static/js/timedropper.min.js"></script>
<script src="/static/js/conditions-input.js"></script>
{% endblock %}


